<template>
  <view class="list-content">
    <view class="search">
      <uni-search-bar
        placeholder="搜索厂区"
        v-model.trim="searchValue"
        cancelText=" "
        class="search-box"
      >
      </uni-search-bar>

      <text @click="search">搜索</text>
    </view>

    <scroll-view
      show-scrollbar
      style="height: calc(100vh - 56px)"
      :scroll-y="true"
      :refresher-enabled="true"
      @refresherrefresh="refresherrefresh"
      lower-threshold="105"
      @scrolltolower="scrolltolower"
      :refresher-triggered="triggered"
    >
      <view
        class="list-item"
        v-for="(item, index) in data.dataList"
        @click="toDetail(item)"
        v-if="data.dataList?.length"
        :key="index"
      >
        <view class="item">
          <view class="item-title"> 序号： {{ index + 1 }} </view>
          <view class="detail">
            <view v-for="(i, z) in columns" :key="z">
              <text class="font-bold"> {{ i.title }} : </text>
              {{ item[i.dataIndex] }}</view
            >
          </view>
        </view>
      </view>
      <view v-else class="no-data"> 暂无数据 </view>
    </scroll-view>
  </view>
</template>

<script>
import _ from "lodash";
import { postStoppageList, columns } from "./api";
import { Toast } from "@/utils/uniHooks/toast";
export default {
  data() {
    return {
      searchValue: "",
      data: {
        dataList: [],
        totalCount: "",
      },
      columns,
      triggered: true, //下拉刷新标志
      pageNo: 1,
      pageSize: 4,
      refresh: false,
    };
  },

  onLoad() {
    this.refresherrefresh();
  },
  methods: {
    search() {
      this.pageNo = 1;
      this.triggered = true;
      this.queryList();
    },

    queryList: _.throttle(
      async function () {
        uni.showLoading();

        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          businessNo: this.searchValue,
        };
        const data = (
          await postStoppageList({
            ...params,
          })
        )?.data;
        this.data = {
          dataList: [...this.data.dataList, ...data?.rows],
          totalCount: data.totalCount,
        };
        this.triggered = false;
      },
      500,
      {
        trailing: false,
      }
    ),

    scrolltolower() {
      if (this.data.totalCount > this.data.dataList.length) {
        uni.showLoading();

        this.pageNo++, this.queryList();
      }
    },
    refresherrefresh() {
      this.data.dataList = [];
      this.search();
    },
    toDetail(item) {
      uni.navigateTo({
        url: `/pages/stopList/detail?id=${item.id}`,
        animationType: "pop-in",
        animationDuration: 300,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list-content {
  display: flex;
  flex-direction: column;
}

.search {
  padding: 0 10px;
  display: flex;
  color: $uni-color-primary;
  justify-content: space-between;
  font-size: 14px;

  align-items: center;

  .search-box {
    flex: 1;
  }
}
</style>
